<template>
  <el-row>
    <el-col>
      <div class="waimai">
        <div class="demo-type">
          <div>
            <el-avatar
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            ></el-avatar>
          </div>
        </div>
        <h2>外卖后台管理</h2>
      </div>
      <el-menu
        router
        default-active="computedPath"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        unique-opened
      >
        <div v-for="(item,index) in menuList" :key="index">
          <el-menu-item  v-if="item.meta.level==1" :index="item.path">
            <i :class="['iconfont',item.meta.icon]"></i>
            <span slot="title">{{item.meta.title}}</span>
          </el-menu-item>

          <el-submenu v-if="item.meta.level==2" :index="item.path">
            <template slot="title">
             <i :class="['iconfont',item.meta.icon]"></i>
            <span>{{item.meta.title}}</span>
            </template>
            <el-menu-item v-for="(menu) in item.children" :key="menu.path" :index="item.path+'/'+menu.path">{{menu.meta.title}}</el-menu-item>
          </el-submenu>
        </div>
      </el-menu>
    </el-col>
  </el-row>
</template>

<script>
export default {
  computedPath() {
    return this.$route.path;
  },
  data() {
    return {
      menuList: [],
    };
  },
  mounted() {
    // 从本地获取筛选好的值
    this.menuList = this.$session.get("sell_menus");
    console.log(this.menuList);
  },
};
</script>

<style lang="less" scoped>
.waimai {
  display: flex;
  justify-content: center;
  align-items: center;
  h2 {
    color: white;
  }
}
</style>
